
<template>
    <div class="threeJsPrc101">
      <div class="myCanvas" ref="myCanvas"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import logo from '../../assets/logo.png';
const optionImages = import.meta.globEager('../../assets/*.png');
const scene = new THREE.Scene();
scene.add(new THREE.AxesHelper(250));
const point  = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
const camera = new THREE.PerspectiveCamera();
camera.fov = 70;
camera.near = 1;
camera.near = 10000;
const renderer = new THREE.WebGLRenderer({
  alpha: true,
});
renderer.debug.checkShaderErrors = false;
renderer.setClearColor(0xb9d3ff, 1);

@Options({ components: {
} })
export default class ThreeJsPrc101 extends Vue {
  public rect: DOMRect|null=null;
  public dpr =750 / window.innerWidth;
  public controls!: OrbitControls;

  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    (this.$refs.myCanvas as HTMLDivElement).append(renderer.domElement);
    renderer.setPixelRatio(this.dpr);
    renderer.setSize(this.rect.width, this.rect.height, false);
    camera.aspect = this.rect.width / this.rect.height;
    camera.position.set(200, 100, 200);
    camera.lookAt(scene.position);
    renderer.render(scene, camera);


    const texture = new THREE.TextureLoader().load(optionImages['../../assets/snow1.png'].default);
    for (let i = 0; i < 100; i++) {
      const spriteMaterial = new THREE.SpriteMaterial({
        map: texture, // 设置精灵纹理贴图
        transparent: true,
        opacity: 1,
      });
      // 创建精灵模型对象
      const sprite = new THREE.Sprite(spriteMaterial);
      scene.add(sprite);
      // 控制精灵大小,
      sprite.scale.set(10, 10, 1); /// / 只需要设置x、y两个分量就可以
      const k1 = Math.random() - 0.5;
      const k2 = Math.random() - 0.5;
      // 设置精灵模型位置，在xoz平面上随机分布
      sprite.position.set(500 * k1, 500 * k2, 5);
    }
    const geometry = new THREE.PlaneGeometry(1000, 1000); // 矩形平面
    // 加载草地纹理贴图
    const texture1 = new THREE.TextureLoader().load(optionImages['../../assets/logo.png'].default);
    // 设置纹理的重复模式
    texture1.wrapS = THREE.RepeatWrapping;
    texture1.wrapT = THREE.RepeatWrapping;
    // uv两个方向纹理重复数量
    texture1.repeat.set(10, 10);
    const material = new THREE.MeshLambertMaterial({
      color: 0x777700,
      map: texture1,
    });
    const mesh = new THREE.Mesh(geometry, material); // 网格模型对象Mesh
    scene.add(mesh); // 网格模型添加到场景中
    mesh.rotateX(-Math.PI / 2);

    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
    });
  }
}
</script>

<style lang="postcss" scoped>
.threeJsPrc101{
  touch-action: none;
  width: 100%;
  height: 100%;
  background: grey;
}
</style>
